<template>
  <div>
    <div class="finance-title">财务管理</div>
    <div class="search-container">
      <span>输入搜素</span>
      <el-input v-model="search" clearable placeholder="输入订单号" class="serchinput"></el-input>
      <div class="block">
        <span class="demonstration">下单时间</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="开始日期">
          </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">——</span>
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="结束日期">
          </el-date-picker>
      </div>
      <el-button type="primary" @click="searchFunBtn">查询</el-button>
      <el-button @click="clearFunBtn">重置</el-button>
    </div>
  </div>
  
  
</template>

<script>
export default {
  data() {
    return {
      search: '',
      value1: '',
      value2: '',
      
    }
  },
  methods:{
    searchFunBtn(){
      this.value1 = new Date(this.value1).getTime()  //转成毫秒
      this.value2 = new Date(this.value2).getTime()
       if(this.value1==0&&this.value2==0){   //筛选完后清空日期，value值为0，会导致刷不出数据，需要将value值清空，重新刷新首屏函数
            this.value1=''
           this.value2=''
      }
      this.$emit('searchParent')     //将查询按钮往上传给父组件    
      // this.$parent.getData()          
    },
    clearFunBtn(){
      this.search=''
      this.value1=''
      this.value2=''
      this.$parent.getData()
    }
  }
}
</script>

<style lang="less" scoped>
.finance-title{
  font-size: 20px;
  color: #333333;
  border-left: 6px solid #428bfe;
  padding-left: 14px;
  width: 1200px;
  margin: 20px auto;
  
}
.search-container{
  width: 1220px;
  height: 64px;
  background-color: white;
  margin: 0 auto;
  line-height: 64px;
  margin-bottom: 20px;
  span{
    font-size: 16px;
    font-weight: bold;
    margin-left: 30px;
  }
  /deep/.serchinput{
    width: 200px;
    display: inline-block;
    margin-left: 8px;
    .el-input__inner{
      height: 32px;
      padding: 0 12px;
      font-size: 12px;
      color: #333333;
      &::placeholder{
        color: #333333;
      }

    }
  }
  .block{
    display: inline-block;
    .el-date-editor{
      width: 130px;
      margin-left: 16px;
    }
  }
  .el-button{
    padding: 12px 24px;
    margin-left: 30px;
  }
}

</style>